<template>
  <div>
    <el-link @click="showClick" :underline="false" class="showLegendView">
      <svg-icon icon-class="eye_show" style="font-size:18px;" class="showLegendSvg" v-if="showLegend" />
      <svg-icon icon-class="eye_hide" style="font-size:16px;" class="showLegendSvg" v-else />
    </el-link>
    <div id="TypeStaMain" ref="chartTypeSta" style="width:100%; height:450px;margin-top:10px;"></div>
  </div>
</template>

<script>
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  data () {
    return {
      chart: null,
      showLegend: true
    }
  },
  props: {
    pieList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    pieList: {
      handler (newValue, oldValue) {
        this.$nextTick(() => {
          this.chart.dispose()
          this.initChart(newValue)
        })
      },
      deep: true // 深度监听
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart(this.pieList)
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    option (val, showLegend = true) {
      console.log('val',val)
      var data = {
        title: {
          // text: '',
          // subtext: '',
          // left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          show: showLegend,
          orient: 'vertical',
          left: 20,
          top: 20,
          bottom: 20,
          data: val.name,
          selected: val.name
        },
        toolbox: {
          right: 30,
          feature: {
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        series: [
          {
            name: this.$t('协议类型'),
            type: 'pie',
            radius: '55%',
            center: ['55%', '50%'],
            data: val,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      return data
    },
    initChart (val) {
      this.chart = this.$echarts.init(document.getElementById('TypeStaMain'))
      if (val && val.length > 0) {
        val.forEach(item => {
          item.name = this.$t(item.key)
        })
      }
      this.chart.setOption(this.option(val), true)
    },
    exportImage () {
      let dataURL = ''
      var img = new Image()
      img.src = this.chart.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff'
      })
      return new Promise(function (resolve, reject) {
        img.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          var ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0)
          dataURL = canvas.toDataURL('image/png')
          resolve(dataURL)
        }
      })
    },
    showClick () {
      this.showLegend = !this.showLegend
      this.chart.setOption(this.option(this.pieList, this.showLegend), true)
    }
  }
}
</script>
<style lang="scss" scoped>
.showLegendView {
  position: absolute;
  margin-left: 25px;
  z-index: 1001;
}
</style>
